<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p v-xyh v-if="jingshenxiaohuo">123</p>
        <button @click="jingshenxiaohuo = !jingshenxiaohuo">点击</button>
        <br>
        -----------------------------
        <input type="text" v-lfx>
    </div>
    <script src="./vue.global.js"></script>

    <script>
        const {createApp} = Vue;

        const app = createApp({
            data(){
                return {
                    jingshenxiaohuo:false
                }
            },
            directives:{
                xyh:{
                    created(el,binding,vnode,prevNode){
                        console.log('创建以后');
                        // console.dir(el)
                        // console.log(binding);
                        // console.log(vnode);// 虚拟dom   
                        console.log(prevNode);
                        
                    },
                    beforeMount(el){
                        console.log('挂载以前')
                    },
                    mounted(el){
                        console.log('挂载以后')
                    },
                    beforeUpdate(el){
                        console.log('更新以前')
                    },
                    updated(el){
                        console.log('更新以后')
                    },
                    beforeUnmount(el){
                        console.log('销毁以前')
                    },
                    unmounted(el){
                        console.log('销毁以后')
                    }
                },
                lfx:{
                    // 挂载以后 这个声明周期  表单焦点自动聚焦
                    mounted(el,binding,vnode,prevNode){
                        console.log('让',el,'自动聚焦');
                        // 表单元素.focus() 
                        el.focus()
                        
                    }
                }
            }
        });
        // app.directive('xyh',{})
        app.mount('#app')
    </script>
</body>
</html>